import React, { memo } from 'react'

import MSNTopBanner from './c-cpns/top-banner';
import HotRecommendWrapper from './c-cpns/hot-recommend'
import MSNThemeHeaderRCM from './c-cpns/new-album'
import MSNRecommendRanking from './c-cpns/recommend-ranking'
import MSNUserLogin from './c-cpns/user-login'
import MSNSettleSinger from './c-cpns/settle-singer'
import MSNHotAnchor from './c-cpns/hot-anchor'
import { 
  RecommendWrapper,
  Content,
  RecommendLeft,
  RecommendRight
 } from './style'

function MSNRecommend(props) {
  return (
    <RecommendWrapper>
      <MSNTopBanner/>
      <Content className='wrap-v2'>
        <RecommendLeft>
          <HotRecommendWrapper/>
          <MSNThemeHeaderRCM/>
          <MSNRecommendRanking/>
        </RecommendLeft>
        <RecommendRight>
          <MSNUserLogin/>
          <MSNSettleSinger/>
          <MSNHotAnchor/>
        </RecommendRight>
      </Content>
    </RecommendWrapper>
  )
}


export default memo(MSNRecommend)
// function MSNRecommend(props) {
//   const { getBanners, topBanners } = props

//   useEffect(()=>{
//     getBanners()
//   },[getBanners])
//   return (
//     <div>MSNRecommend: {topBanners.length}</div>
//   )
// }
// // 这里拿到的state是完整的state，是放到store里面合并的state
// const mapStateToProps = state =>({
//   topBanners: state.recommend.topBanners
// });

// const mapDispatchToProps = dispatch => ({
//   getBanners: ()=>{
//     dispatch(getTopBannerAction())
//   }
// })

// export default connect(mapStateToProps, mapDispatchToProps)(memo(MSNRecommend))